<template>
	<view class="recipe-entry" @tap="goToMyRecipes">
		<!-- 顶部卡片 -->
		<view class="recipe-card">
			<view class="card-header">
				<view class="header-left">
					<text class="title">我的菜谱</text>
					<text class="subtitle">记录美食，分享生活</text>
				</view>
				<view class="header-right">
					<text class="total-count">{{totalRecipes}}</text>
					<text class="total-label">发布菜谱</text>
				</view>
			</view>
			
			<!-- 统计数据 -->
			<view class="stats-row">
				<view class="stat-item">
					<text class="stat-num">{{breakfastCount}}</text>
					<text class="stat-label">早餐食谱</text>
				</view>
				<view class="stat-item">
					<text class="stat-num">{{lunchCount}}</text>
					<text class="stat-label">午餐食谱</text>
				</view>
				<view class="stat-item">
					<text class="stat-num">{{dinnerCount}}</text>
					<text class="stat-label">晚餐食谱</text>
				</view>
			</view>
			
			<!-- 最近添加 -->
			<view class="recent-recipes" v-if="recentRecipes.length > 0">
				<text class="section-title">最近添加</text>
				<scroll-view class="recipe-scroll" scroll-x>
					<view class="recipe-list">
						<view class="recipe-item" v-for="(item, index) in recentRecipes" :key="index">
							<text class="recipe-name">{{item.menuName}}</text>
							<text class="recipe-time" 
								:style="{
									background: item.mealTime === '早餐' ? '#e8f4ff' : item.mealTime === '午餐' ? '#fff3e8' : '#ffeef0',
									color: item.mealTime === '早餐' ? '#007AFF' : item.mealTime === '午餐' ? '#ff9500' : '#ff2d55'
								}"
							>{{item.mealTime}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 功能区 -->
		<view class="feature-section">
			<view class="feature-row">
				<view class="feature-item">
					<text class="feature-icon">📝</text>
					<text class="feature-text">记录菜谱</text>
				</view>
				<view class="feature-item">
					<text class="feature-icon">🗂</text>
					<text class="feature-text">分类管理</text>
				</view>
				<view class="feature-item">
					<text class="feature-icon">📊</text>
					<text class="feature-text">数据统计</text>
				</view>
			</view>
		</view>
		
		<!-- 底部提示 -->
		<view class="bottom-tip">
			<text class="tip-text">点击查看全部菜谱 ></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recipes: [],
				recentRecipes: []
			}
		},
		computed: {
			totalRecipes() {
				return this.recipes.length
			},
			breakfastCount() {
				return this.recipes.filter(recipe => recipe.mealTime === '早餐').length
			},
			lunchCount() {
				return this.recipes.filter(recipe => recipe.mealTime === '午餐').length
			},
			dinnerCount() {
				return this.recipes.filter(recipe => recipe.mealTime === '晚餐').length
			}
		},
		created() {
			this.loadRecipes()
		},
		methods: {
			loadRecipes() {
				try {
					const savedRecipes = uni.getStorageSync('meals')
					if (savedRecipes) {
						this.recipes = JSON.parse(savedRecipes)
						// 获取最近5条记录
						this.recentRecipes = this.recipes
							.sort((a, b) => new Date(b.submitTime) - new Date(a.submitTime))
							.slice(0, 5)
					}
				} catch (e) {
					console.error('加载菜谱失败:', e)
				}
			},
			
			goToMyRecipes() {
				
				try {
				        uni.navigateTo({
				            url: '/pages/menus/menus',
				            success: (res) => {
				                uni.showToast({
				                    title: '页面跳转成功',
				                    icon: 'none'
				                });
				            },
				            fail: (err) => {
				                console.error('跳转失败:', err);
				                // 如果跳转失败，显示提示
				                uni.showToast({
				                    title: '页面跳转失败',
				                    icon: 'none'
				                });
				            }
				        });
				    } catch (e) {
				        console.error('跳转错误:', e);
				    }
			}
		
		}
	}
</script>

<style lang="scss">
.recipe-entry {
	padding: 30rpx;
	background: #f5f5f5;
	
	.recipe-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
		margin-bottom: 30rpx;
		
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;
			
			.header-left {
				.title {
					font-size: 40rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
					display: block;
				}
				
				.subtitle {
					font-size: 26rpx;
					color: #999;
				}
			}
			
			.header-right {
				text-align: right;
				
				.total-count {
					font-size: 48rpx;
					font-weight: bold;
					color: #42bd56;
					display: block;
				}
				
				.total-label {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
		
		.stats-row {
			display: flex;
			justify-content: space-around;
			padding: 30rpx 0;
			border-top: 2rpx solid #f5f5f5;
			border-bottom: 2rpx solid #f5f5f5;
			margin-bottom: 30rpx;
			
			.stat-item {
				text-align: center;
				
				.stat-num {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					display: block;
					margin-bottom: 10rpx;
				}
				
				.stat-label {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
		
		.recent-recipes {
			.section-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
				display: block;
			}
			
			.recipe-scroll {
				white-space: nowrap;
				
				.recipe-list {
					display: inline-block;
					
					.recipe-item {
						display: inline-block;
						background: #f8f8f8;
						padding: 20rpx 30rpx;
						border-radius: 12rpx;
						margin-right: 20rpx;
						
						.recipe-name {
							font-size: 28rpx;
							color: #333;
							margin-bottom: 10rpx;
							display: block;
						}
						
						.recipe-time {
							font-size: 24rpx;
							padding: 4rpx 16rpx;
							border-radius: 20rpx;
						}
					}
				}
			}
		}
	}
	
	.feature-section {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		
		.feature-row {
			display: flex;
			justify-content: space-around;
			
			.feature-item {
				text-align: center;
				
				.feature-icon {
					font-size: 48rpx;
					margin-bottom: 10rpx;
					display: block;
				}
				
				.feature-text {
					font-size: 26rpx;
					color: #666;
				}
			}
		}
	}
	
	.bottom-tip {
		text-align: center;
		padding: 20rpx 0;
		
		.tip-text {
			font-size: 26rpx;
			color: #007AFF;
		}
	}
}

// 添加点击效果
.recipe-entry {
	&:active {
		opacity: 0.8;
	}
}
</style>